<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style type="text/css">
    </style>
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div id="app">
    <el-container>
        <el-container>
            <!-- 编辑标签弹层 -->
            <div class="add-form" style="margin: 30px 10px 10px 30px;">
                <el-form ref="from" :model="formData" :rules="rules"  label-width="150px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="学号" prop="stuId">
                                <el-input v-model="formData.stuId" disabled/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="姓名" prop="stuName">
                                <el-input v-model="formData.stuName" disabled/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="身份证" prop="stuIdCard">
                                <el-input v-model="formData.stuIdCard" disabled/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="电话"  prop="stuPhone">
                                <el-input v-model="formData.stuPhone"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="9">
                            <el-form-item label="绑定邮箱" prop="stuMail">
                                <el-input v-model="formData.stuMail"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-button type="primary" @click="getYZM()" style="margin-left:10px ;">验证码</el-button>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="邮箱验证码" prop="yzm">
                                <el-input  v-model="formData.yzm" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="一卡通" prop="stuOneCard"/>
                            <el-select v-model="formData.stuOneCard" style="width: 100px;"   placeholder="一卡通">
                                <el-option label="已领取" :value="true">已领取</el-option>
                                <el-option label="未领取" :value="false">未领取</el-option>
                                <el-option :value="null">取消选择</el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="床上用品" prop="stuBedding"/>
                            <el-select v-model="formData.stuBedding" style="width: 100px;"   placeholder="床上用品">
                                <el-option label="已领取" :value="true">已领取</el-option>
                                <el-option label="未领取" :value="false">未领取</el-option>
                                <el-option :value="null">取消选择</el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="军训服装" prop="stuTrainUniform"/>
                            <el-select v-model="formData.stuTrainUniform" style="width: 100px;"   placeholder="军训服装">
                                <el-option label="已领取" :value="true">已领取</el-option>
                                <el-option label="未领取" :value="false">未领取</el-option>
                                <el-option :value="null">取消选择</el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="专业名"  prop="majorName">
                                <el-select v-model="formData.majorName"  placeholder="请选择" disabled>
                                    <el-option v-for="item in options"
                                               :key="item.label"
                                               :label="item.label"
                                               :value="item.label">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="寝室号" prop="stuDormitory">
                                <el-input v-model="formData.stuDormitory" disabled/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer" style="margin-left: 100px">
                    <el-button type="primary" @click="TJ()">提交信息</el-button>
                    <el-button type="primary" @click="daoxiaoqiandao()">到校签到</el-button>
                </div>
            </div>
            <div style=" margin: 30px 10px 10px 30px;border: 2px solid red;width: 600px">
                <div>
                    <el-tag type="danger" effect="dark">
                        贴心小提示
                    </el-tag><br>
                    <el-tag type="warning">
                        [一卡通]办理地点在商业银行往图书馆的路上
                    </el-tag>
                    <el-tag type="danger">
                        [床上用品]可以自己购买，也可以去【二食堂门口】采购学校提供的床上用品
                    </el-tag>
                    <el-tag type="warning">
                        [军训服装]是学校统一购买的，若有身体原因不能参加军训的，需要告知辅导员
                    </el-tag>
                </div>
            </div>
        </el-container>
    </el-container>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            formData: {},
            username:null,
            options: [{
                value: '1',
                label: '计算机科学与技术'
            }, {
                value: '2',
                label: '电子信息工程'
            }, {
                value: '3',
                label: '软件工程'
            }, {
                value: '4',
                label: '动物医学'
            }],
            rules: {//校验规则
                stuId: [{ required: true,pattern: /^\d{10}$/, message: '【必填】学号格式错误,10位数', trigger: 'blur'}],
                stuName: [{ required: true, message: '【必填】学生名必填', trigger: 'blur' }],
                stuIdCard: [{ required: true,pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,message: '【必填】学生身份证号码错误', trigger: 'blur'}],
                majorName: [{required: true,message: '【必填】专业名必选', trigger: 'blur'}],
                stuMail: [{required: false,pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,message: '邮箱格式错误', trigger: 'blur'}],
                stuPhone: [{required: false,pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,message: '电话格式错误', trigger: 'blur'}]
            }
        },
        created(){
            //通过学生学号来查询相关信息
            var stuId = sessionStorage.getItem("stuId");
            axios.get("/student/findByStuId?id="+stuId).then((res)=>{
                this.formData=res.data.data;
            })
        },
        methods: {
            //获取验证码
            getYZM(){
                        axios.post("/email/sendEmail?email=" + this.formData.stuMail).then((res) => {
                            if (res.data.flag) {
                                this.$message.success(res.data.message);
                            } else {
                                this.$message.error(res.data.message);
                            }
                        })
            },
            //提交消息,进行验证
            TJ(){
                axios.post("/student/tijiaoxinxi",this.formData).then((res)=>{
                    if (res.data.flag) {
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
            },
            daoxiaoqiandao(){
                axios.post("/student/signIn",this.formData).then((res)=>{
                    if (res.data.flag) {
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
            }


        }
    })
</script>
<style>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 700px;
    }
</style>
</html>
